<template>
	<div>
		<el-dialog :title="title" :close-on-click-modal="false" :before-close="handleClose" :visible.sync="visible"
			width="800px">
			<!--高级查询-->
			<div class="filter_container">
				<div class="filter_row">
					<el-form ref="form" :model="params" :inline="true" label-width="100px" size="mini">
						<el-row :gutter="24">
							<el-col :span="12">
								<el-form-item label="物料名称:">
									<el-input v-model="queryParams.skuName" class="search-container">
										<el-button slot="append" icon="el-icon-search" @click.native="handleQuery" />
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="图号:">
									<el-input v-model="queryParams.skuCode" class="search-container">
										<el-button slot="append" icon="el-icon-search" @click.native="handleQuery" />
									</el-input>
								</el-form-item>
							</el-col>
							
							<!-- <el-col :span="12">
                <el-form-item>
                  <el-button type="cyan" size="mini" @click="handleFilter">查询</el-button>
                  <el-button type="primary" size="mini" @click="handleSelected">确定</el-button>
                </el-form-item>
              </el-col> -->
						</el-row>
					</el-form>
				</div>
			</div>
			<!--栅格-->
			<div>
				<el-table ref="table" v-loading="loading" :data="page.rows" element-loading-text="Loading" border stripe
					fit highlight-current-row>
					<el-table-column label="图号" align="center" prop="skuCode" />
					<el-table-column label="物料名称" align="center" prop="skuName" />
					<el-table-column label="部门" align="center" prop="categoryName" />
					<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
						<template slot-scope="scope">
							<el-button size="mini" type="text" icon="el-icon-check"
								@click="handleSelected(scope.row)">确认</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!--分页-->
			<div>
				<el-pagination v-show="page.total > 0" :current-page="page.current" :page-sizes="page.pageSizes"
					:page-size="page.pageSize" :total="page.total" background
					layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
					@current-change="handleCurrentChange" />
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import SkuApi from '@/api/pms/SkuApi'

	export default {
		name: 'SkuSelector',
		props: {
			/* customerId: {
			  type: [String],
			  default: ''
			}, */
			visible: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				queryParams: {
					skuCode: null,
					skuName: null
				},
				list: null,
				loading: false,
				title: '',
				selects: {},
				params: {
					brandName: null
				},
				page: {
					current: 1,
					pageSize: 10,
					pageSizes: [10, 20, 30, 50, 100],
					total: null,
					rows: null
				}
			}
		},
		created() {
			this.handleQuery();
		},
		methods: {
			handleQuery() {
				this.loading = true
				//   this.queryParams.customerId = this.customerId
				SkuApi.page(this.queryParams, this.page).then(response => {
					this.page.total = response.data.total
					this.page.rows = response.data.records
					this.loading = false
				}, () => {
					this.loading = false
				})
			},
			handleSelected(name) {
				this.$emit('selected', name)
				this.handleClose()
				//   document.body.click()
			},

			handleClose() {
				this.$emit('update:visible', false)
			},
			handleSizeChange(pageSize) {
				this.page.pageSize = pageSize
				this.handleQuery()
			},
			handleCurrentChange(current) {
				this.page.current = current
				this.handleQuery()
			},
			reset() {
				this.queryParams = {
					skuName: null
				}
				this.handleQuery()
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.selector-body {
		width: 100%;
		padding: 10px;

		.selector-list {
			height: 400px;
			overflow-y: scroll;

			div {
				height: 30px;
				line-height: 30px;
				margin-bottom: -5px;
				cursor: pointer;
				width: 33%;
				float: left;
			}

			span {
				display: inline-block;
				vertical-align: -0.15em;
				fill: currentColor;
				overflow: hidden;
			}
		}
	}
</style>